<style scoped lang="less">
	.header {
		width: 100%;
		height: 10vh;
		// border: 1px solid red;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 25%;
			display: flex;
			align-items: center;
			font-size: 18px;
			font-weight: 700;
			.el-input {
				width: 205px;
				margin-right: 10px;
				border: none;
			}
		}
		.right {
			width: 18%;
			.addBtn {
				background-color: #00a0e9;
				border: none;
			}
			span {
				display: inline-block;
				// width: 20%;
				font-size: 20px;
				margin-left: 2%;
				// border: 1px solid red;
			}
		}
	}
	.content{
		width: 100%;
		// height: 10vh;
		// border:1px solid red;
		display: flex;
		flex-wrap: wrap;
		margin-top: 2%;
		.box{
			width: 40%;
			height: 5vh;
			display: flex;
			font-weight: 600;
			line-height: 5vh;
			margin-top: 2%;
			align-items: center;
			position: relative;
			.del{
				width: 10px;
				height: 10px;
				position: absolute;
				top:-4px;
				right: 64px;
			}
			.teacher{
				width: 70%;
				height: 100%;
				background-color: #fff;
				border:1px solid #000;
				font-size: 16px;
				font-weight: 400;
				box-sizing: border-box;
				padding: 0 2%;
			}
			.addTeacher{
				margin-left: 2%;
			}
		}
	}
</style>
<template>
	<div class="header">
		<div class="left">
			<span> 课程名称：</span>
			<el-input type="info" v-model="courseName" disabled />
		</div>
		<div class="right">
			<el-button type="success" v-if="addFlag==true" @click="over">完成</el-button>
			<el-button class="addBtn" type="info" :icon="CirclePlus" v-if="addFlag==false" @click="add">添加</el-button>
			<el-button type="danger"  v-if="addFlag==false" @click="del">删除</el-button>
			<span @click="back">返回</span>
		</div>
	</div>
	<div class="content">
		<div class="box" v-for="x in nowTeacher">
			<span>授课教师：</span>
			<div class="teacher">{{x.teaName}}</div>
		
			 <el-button v-if="delFlag==true" type="danger" :icon="CircleClose" circle class="del" @click="delTeacher(x.teaId)"/>
		</div>
		<div class="box"  v-if="addFlag2==true">
			<span>授课教师：</span>
			<el-select
			      v-model="sevalue"
			      placeholder="请选择"
			      size="large"
			      style="width: 240px"
			    >
			      <el-option
			        v-for="item in teacherList"
			        :key="item.teaName"
			        :label="item.teaName"
			        :value="item.teaId"
			      />
			    </el-select>
			<el-button :icon="Plus" type="success" class="addTeacher" @click="addTeacher"></el-button>
		</div>
	</div>
</template>

<script setup>
	import {
		CirclePlus,Plus,CircleClose
	} from '@element-plus/icons-vue'
	import {
		ref
	} from 'vue';
	import {
		useRoute,useRouter
	} from 'vue-router';
	import {
		Allteacher,
		teacher,
		addCourseTeacher,
		delCourseTeacher
	} from '@/api/gh';

	
	//是否处于添加状态
	let addFlag = ref(false)
	let addFlag2 = ref(false)
	// 获取当前科目信息
	let courseName = ref(""); //当前科目名称
	let nowTeacher = ref([]); //当前科目教师
	let teacherList = ref([]); //所有教师
	let route = useRoute();
	let router = useRouter();
	const courseTeacher = async () => {
		let res = await teacher({
			subId: route.query.courseId
		})
		courseName.value = res.subName
		nowTeacher.value = res.teachers
	}
	courseTeacher()
	//获取所有老师
	const getAllteacher = async()=>{
		let res = await Allteacher({
			subId: route.query.courseId
		})
		teacherList.value = res.teachers
	}
	getAllteacher()
	//添加
	const add = ()=>{
		addFlag.value = true
		addFlag2.value = true
	}
	const sevalue = ref('') //选中的老师
	const addTeacher = async ()=>{
		let res =await addCourseTeacher({
			teaId:sevalue.value,
			subId:route.query.courseId
		})
		
			courseTeacher()
			getAllteacher()
		
	}
	//完成
	const over =()=>{
		addFlag.value = false
		addFlag2.value = false
		delFlag.value=false
	}
	//返回
	const back = () =>{
		router.push({
			name: "coursemanager",
			path: "/coursemanager",
			
		})
	}
	//删除
	let delFlag = ref(false)
	const del = ()=>{
		delFlag.value=true
		addFlag.value = true
	}
	const delTeacher=async(teaId)=>{
		let res = await delCourseTeacher({
			teaId:teaId,
			subId:route.query.courseId
		})
		courseTeacher()
		getAllteacher()
	}
</script>